<template>
    <div>
        <COM>
            <template #head>
                <tr>
                    <th v-for="item in TOP" class="Head">{{ item }}</th>
                </tr>
            </template>
            <template #body="OBJ">
                <tr v-for="(item, index) in BODY">
                    <td class="single">{{ item.NUM }}</td>
                    <td class="single">{{ item.NAME }}</td>
                    <td class="single">{{ item.AGE }}</td>
                    <td class="single" v-show=OBJ.EXBIT>删除</td>
                    <td class="single" v-show=!OBJ.EXBIT>展示</td>
                </tr>
            </template>
        </COM>
    </div>
</template>

<script setup>
import { ref } from 'vue';
let TOP = ['序号', '姓名', '年纪', '操作']
let BODY = ref([
    { NUM: '1', NAME: '狗蛋', AGE: '19' },
    { NUM: '2', NAME: '大锤', AGE: '18' },
    { NUM: '3', NAME: '铁棍', AGE: '17' }])
</script>

<style scoped>
* {
    margin: 0px;
    padding: 0px;
}

.Head {
    border: 1px solid black;
    width: 100px;
    height: 30px;
}

.single {
    border: 1px solid black;
    text-align: center;
    height: 30px;
}
</style>